<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style >
			
		
		*{
		margin:0px;
		padding:0px;
		}
		#container{
			background: white;
			width: 1000px;
			height: 690px;
			margin:0px auto;
			font-family: "楷体";
			font-size: 12px;
		}
		#container #header{
			width: 100%;
			background: orange url(img/top_bg.jpg);
			width: 100%;
			height: 130px;}
		#main{
				background: white;
				height: 460px;}
		#footer{
				background: #EEEEEE;
				height: 100px;}
		#lsider{
			width: 70%;
			float: left;
			height: 470px;
		}	
		#sider{
			width: 30%;
			height: 460px;
			float: right;
			background: chartreuse;
		}
		.lsider-title{
			width: 100%;
			height: 35px;
			background: gainsboro;
			font-family: 微软雅黑;
		}
		.lsider-title img{
			float: left;
			margin-top: 4px;
		}
		.lsider-title h2{
			float: left;
			margin: 5px;
			
		}
		.lsider-title a{
			float: right;
			text-decoration: none;
			
			}
		.lsider-title a:hover {color:orange;}
		.lsider-title a:active {color:black;}
		
		#lsider-main .box{
		width: 46%;
		height: 190px;
		margin: 10px;
		background: #EEE;
			float: left;
		}
		#sider-1{
			width: 100%;
			height: 225px;
			background: #EEEEEE;
		}
		#sider-2{
			width: 100%;
			height: 235px;
			background: #EEEEEE;
			}
		#nav{
			height: 100px;
		}
		#nav ul{
			list-style: none;
		}
		
		#nav ul li{
			float: left;
			width: 90px;
			height: 30px;
			text-align: center;
			line-height: 34px;
			font-size: 25px;
			font-weight: 300;
			color: #363636;
			
		}
		#nav ul li:hover{
			background: url(img/nav_on.gif);
			color: #FFFFFF;
			}
			#lsider-main .box img{
				float: left;
			}
			#lsider-main .box ul{
				float: left;
				width: 94px;
				margin-left: 20px;
				list-style: none;
			}
			#lsider-main .box ul li{
				margin-bottom: 18px;
			}
			#lsider-main .box ul li a{
				text-decoration: none;
				color: grey;
			}
			#lsider-main .box a:hover{
				text-decoration:underline;
				color: orange;
			}
			#lsider-main .box h3{
				color: grey;
				margin-bottom: 10px;
			}
			.box1{
				
				font-family: "楷体";
				font-size: 18px;
				list-style: none;

			}
			.box1 a{
				text-decoration: none;
				background: url(img/article_head.gif)no-repeat;
				color: #888;
				padding-left: 30px;
				line-height: 38px;
			}
			#footer-01{
				
				display: flex;
				float: left;
				font-size: 20px;
				list-style: none;
			}
			#footer-02{
				font-size: 15px;
				font-weight: 700;
			}
		</style>
	</head>
	<body>
		<div id="container">
			<div id="header">
				<img src="img/logo.jpg" />
				<div id="nav">
					<ul>
						<li>导航1</li>
						<li>导航2</li>
						<li>导航3</li>
						<li>导航4</li>
						<li>导航5</li>
						<li>导航6</li>
						<li>导航7</li>
						
					</ul>
					
				</div>
			</div>
			<div id="main">
				<div id="lsider">
					<div class="lsider-title">
						<img src="img/circle.gif">
						<h2>核心业务</h2>
						<a href="#">MORE&gt;&gt;</a>
					</div>
					<div id="lsider-main">
						<div class="box">
							<h3>电子商务类网站建设</h3>
							<img src="img/eshop_service.jpg" alt="描述" title="标题" />
							<ul>
								<li>
									<img src="img/service_intro_bg.gif" />
									<a href="#">方便的物流管理</a>
								</li>
								<li>
									<img src="img/service_intro_bg.gif" />
									<a href="#">方便的物流管理</a>
								</li>
								<li>
									<img src="img/service_intro_bg.gif" />
									<a href="#">方便的物流管理</a>
								</li>
								<li>
									<img src="img/service_intro_bg.gif" />
									<a href="#">方便的物流管理</a>
								</li>
								<li>
									<img src="img/service_intro_bg.gif" />
									<a href="#">方便的物流管理</a>
								</li>
							</ul>
						</div>
						<div class="box">
							<h3>电子商务类网站建设</h3>
							<img src="img/eshop_service.jpg" alt="描述" title="标题" />
							<ul>
								<li>
									<img src="img/service_intro_bg.gif" />
									<a href="#">方便的物流管理</a>
								</li>
								<li>
									<img src="img/service_intro_bg.gif" />
									<a href="#">方便的物流管理</a>
								</li>
								<li>
									<img src="img/service_intro_bg.gif" />
									<a href="#">方便的物流管理</a>
								</li>
								<li>
									<img src="img/service_intro_bg.gif" />
									<a href="#">方便的物流管理</a>
								</li>
								<li>
									<img src="img/service_intro_bg.gif" />
									<a href="#">方便的物流管理</a>
								</li>
							</ul>
						</div>
						<div class="box">
							<h3>电子商务类网站建设</h3>
							<img src="img/eshop_service.jpg" alt="描述" title="标题" />
							<ul>
								<li>
									<img src="img/service_intro_bg.gif" />
									<a href="#">方便的物流管理</a>
								</li>
								<li>
									<img src="img/service_intro_bg.gif" />
									<a href="#">方便的物流管理</a>
								</li>
								<li>
									<img src="img/service_intro_bg.gif" />
									<a href="#">方便的物流管理</a>
								</li>
								<li>
									<img src="img/service_intro_bg.gif" />
									<a href="#">方便的物流管理</a>
								</li>
								<li>
									<img src="img/service_intro_bg.gif" />
									<a href="#">方便的物流管理</a>
								</li>
							</ul>
						</div>
						<div class="box">
							<h3>电子商务类网站建设</h3>
							<img src="img/eshop_service.jpg" alt="描述" title="标题" />h
							<ul>
								<li>
									<img src="img/service_intro_bg.gif" />
									<a href="#">方便的物流管理</a>
								</li>
								<li>
									<img src="img/service_intro_bg.gif" />
									<a href="#">方便的物流管理</a>
								</li>
								<li>
									<img src="img/service_intro_bg.gif" />
									<a href="#">方便的物流管理</a>
								</li>
								<li>
									<img src="img/service_intro_bg.gif" />
									<a href="#">方便的物流管理</a>
								</li>
								<li>
									<img src="img/service_intro_bg.gif" />
									<a href="#">方便的物流管理</a>
								</li>
							</ul>
						</div>
					</div>
				</div>
				<div id="sider">
					<div id="sider-1">
					<div class="lsider-title">
						<img src="img/circle.gif"/>
						<h2>文章观点</h2>
						<a href="#">MORE&gt;&gt;</a>
					</div>	
							<ul class="box1">
								<li><a href="#">这是一篇好文章1</a></li>
								<li><a href="#">这是一篇好文章2</a></li>
								<li><a href="#">这是一篇好文章3</a></li>
								<li><a href="#">这是一篇好文章4</a></li>
								<li><a href="#">这是一篇好文章5</a></li>
							</ul>
					
					</div>
					<div id="sider-2">
					<div class="lsider-title">
						<img src="img/circle.gif">
						<h2>联系我们</h2>
						<a href="#">MORE&gt;&gt;</a>
					</div>
					<ul class="box1">
						<li><a href="#">方式一</a></li>
						<li><a href="#">方式二</a></li>
						<li><a href="#">方式三</a></li>
						<li><a href="#">方式四</a></li>
						<li><a href="#">方式五</a></li>
					</ul>
					</div>	
				</div>
			</div>
			<div id="footer">
					<ul id="footer-01">
						<li>联系我们1</li>
						<li>&nbsp;&nbsp;联系我们2</li>
						<li>&nbsp;&nbsp;联系我们3</li>
						<li>&nbsp;&nbsp;联系我们4</li>
						<li>&nbsp;&nbsp;联系我们5</li>
						<li>&nbsp;&nbsp;联系我们6</li>
						<li>&nbsp;&nbsp;联系我们7</li>
					</ul>	
				<br /><br /><br />
				<address id="footer-02">© 2006-2009 北京市灵犀慧通科技有限公司 版权所有 http://www.lionhit.com 京ICP备07020337号</address>
			</div>
		</div>
	</body>
</html>
